<template>
  <div>
    <h1>
      全选: <input type="checkbox" v-model="isAll" />
      <!-- 1. 绑定click事件 -->
      <button @click="reverseFn">反选</button>
      <ul>
        <li v-for="item in list" :key="item.name">
          <input type="checkbox" v-model="item.checked" /> {{ item.name }}
        </li>
      </ul>
    </h1>
  </div>
</template>

<script>
/*
  学习目标：实现反选
*/
export default {
  data() {
    return {
      list: [
        { checked: true, name: "八戒" },
        { checked: false, name: "悟空" },
        { checked: false, name: "师父" },
        { checked: true, name: "沙师弟" },
      ],
    };
  },

  computed: {
    isAll: {
      get() {
        const res = this.list.every((item) => {
          return item.checked === true;
        });
        return res;
      },

      set(val) {
        this.list.forEach((item) => {
          item.checked = val;
        });
      },
    },
  },

  methods: {
    //  2. 遍历数据, 取反
    reverseFn() {
      this.list.forEach((item) => {
        item.checked = !item.checked;
      });
    },
  },
};
</script>

<style></style>
